<template>
  <div class="container">
    <div class="mainCon">
      <div class="commomPaddingComtainer">
        <el-row class="toolbar searchInputWidth" style="padding-bottom: 0">
          <el-form :inline="true" :model="filterField" ref="searchConditions">
            <el-form-item label="时间" class="row-padding-bottom">
              <el-date-picker v-model="time" type="date" placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="参建单位" class="row-padding-bottom">
              <el-select
                v-model="filterField.method"
                clearable
                filterable
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) of methodList"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="班组" class="row-padding-bottom">
              <el-cascader
                v-model="orgId"
                :options="orglist"
                :props="{ checkStrictly: true }"
                @change="handleChange"
                clearable
              ></el-cascader>
            </el-form-item>
            <el-form-item label="工人" class="row-padding-bottom name">
              <el-input
                placeholder="请输入姓名或身份证号"
                clearable
                v-model="filterField.name"
                @blur="filterField.name = changeValue($event)"
              ></el-input>
            </el-form-item>
            <el-form-item label="状态" class="row-padding-bottom">
              <el-select
                v-model="filterField.method"
                clearable
                filterable
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) of methodList"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="方向" class="row-padding-bottom">
              <el-select
                v-model="filterField.method"
                clearable
                filterable
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) of methodList"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                icon="icon iconfont iconchazhao1"
                @click="searchList"
                class="commonBtn"
              ></el-button>
            </el-form-item>
            <!-- <el-form-item class="fr">
              <el-button class="commonBut saveBtn funComBut"  icon="icon iconfont icondaochu"  @click="exportExcel" v-show="exportBtn">导出报表</el-button>
            </el-form-item> -->
          </el-form>
        </el-row>

        <el-table
          :data="tableList"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          v-loading="loading"
          style="border: 1px solid #dfe6ec"
        >
          <el-table-column
            prop="idCard"
            label="姓名"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="orgName"
            label="身份证号"
            align="center"
          ></el-table-column>
          <el-table-column prop="employeeType" label="参建单位" align="center">
            <template slot-scope="scope">
              {{ scope.row.employeeType ? scope.row.employeeType : '--' }}
            </template>
          </el-table-column>
          <el-table-column prop="attDays" label="所属班组" align="center">
            <template slot-scope="scope">
              {{ scope.row.attDays }}
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="打卡时间"
            align="center"
          ></el-table-column>
          <el-table-column
            label="打卡地址"
            min-width="100"
            align="center"
            fixed="right"
          ></el-table-column>
          <el-table-column
            prop="name"
            label="打卡图片"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="name"
            label="状态"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="name"
            label="方向"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="name"
            label="打卡方式"
            align="center"
          ></el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无相关信息"></emptyTable>
          </div>
        </el-table>
        <!-- filterField为搜索条件 -->
        <!-- getTableList为获取子组件的数据 -->
        <Pagination
          ref="pagination"
          @getList="getTableList"
          :filterField="filterField"
          :requestUrl="requestUrl"
        ></Pagination>
      </div>

      <!-- 考勤明细弹框 -->
    </div>
  </div>
</template>

<script>
//
import common from '../../kits/common'

export default {
  // name: "monitorAttendance",

  data() {
    return {
      pathUrl: '/home/attendance/punchCardRuleList',
      btnText: '考勤规则设置',
      //表格数据
      tableList: [],
      requestUrl: 'api-att/nc/attendance/expand/attlist',
      time: [],
      orgId: '',
      //搜索条件
      filterField: {
        startDate: '',
        endDate: '',
        orgId: '',
        name: '',
      },
      loading: true, //考勤loading
      tableHeight: window.innerHeight - 200,
      orglist: [],
      isShow: false,
      // oldPicList:[],
    }
  },
  created() {
    this.filterField.name = this.$route.query.employeeName
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
  },
  methods: {
    getTableList(data) {
      this.tableList = data
      this.loading = false
      if (this.tableList.length < 1) {
        this.isShow = true
      }
    },
    // 搜索
    searchList() {
      this.$refs.pagination.getTableListData()
    },
    searchBrand() {
      this.$refs.drawerPagination.getTableListData()
    },
    exportExcel() {
      window.location.href =
        common.commonApi + 'api-att/nc/attendance/expand/export'
    },
    getOrglist() {
      this.axios({
        method: 'post',
        url: 'api-att/nc/attendance/expand/orgarc',
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.orglist = response.data.result
            } else {
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    handleChange() {},
    //打卡次数
    showAttendanceDetail() {},
  },
}
</script>

<style scoped lang="less">
.container {
  .mainBox {
    .commomPaddingComtainer {
      padding: 0 24px 24px 24px;
    }
  }
  .mainCon {
    top: 0;
  }
}

.commomPadding {
  padding-top: 0;
  /deep/ .imgPrev {
    width: 50px;
  }
}
</style>
